<template>
  <div class="mine">
    <div class="mine-bgimg">
      <div class="addr" @click="JumpTo('/address')"></div>
      <div class="user_box">
        <div class="user_head">
          <img v-if="messageName.after_image !== undefined" :src="messageName.after_image || 0" alt="">
          <!-- <img src="http://sucai.suoluomei.cn/sucai_zs/images/img3.jpg?x-oss-process=image/quality,Q_70" alt=""> -->
        </div>
        <div class="user_info">
          <div>用户名:{{messageName.name}}</div>
          <div>当前排名:{{message.id}}</div>
        </div>
      </div>
      <hplDialog
        :visible="visible"
        :msg="msg"
        @close="handleModalVisible"
      ></hplDialog>
      <div class="user_record">
        <div class="title">
          <div class="record_title" @click="lq" :class="right==0 ? 'redfont' : 'red'">
            <h3>我的礼券</h3>
          </div>
          <div class="record_title" @click="jp" :class="right==1 ? 'redfont' : 'red'">
            <h3>我的奖品</h3>
          </div>
          <div class="record_title" @click="zj" :class="right==2 ? 'redfont' : 'red'">
            <h3>我的战绩</h3>
          </div>
          <div class="record_title" @click="hb" :class="right==3 ? 'redfont' : 'red'">
            <h3>我的海报</h3>
          </div>
        </div>
        <!-- 我的战绩 -->
        <div class="record_cont" v-if="right==2">
          <div class="record_item">
            <div class="record_lain">
              <img src="http://sucai.suoluomei.cn/sucai_zs/images/ph.png?x-oss-process=image/quality,Q_70" class="record_icon">
            </div>
            <div class="record_lain">排名</div>
            <div class="record_lain">票数</div>
          </div>

          <div class="record_item record_chitem">
            <div class="record_lains">总成绩:</div>
            <div class="record_laines">{{message.total_rank}}</div>
            <div class="record_laines">{{message.total_num}}</div>
          </div>

          <div class="record_item record_chitem">
            <div class="record_lains">月成绩:</div>
            <div class="record_laines">{{message.month_rank}}</div>
            <div class="record_laines">{{message.month_num}}</div>
          </div>

          <div class="record_item record_chitem">
            <div class="record_lains">周成绩:</div>
            <div class="record_laines">{{message.week_rank}}</div>
            <div class="record_laines">{{message.week_num}}</div>
          </div>
        </div>
        <!-- 我的奖品 -->
        <div class="record_cont" v-if="right==1">
          <div class="record_item">
            <div class="record_lain">奖品</div>
            <div class="record_lain">时间</div>
            <div class="record_lain"></div>
          </div>
          <div class="prize-item">
            <div class="record_item record_chitem" v-for="prize in prizes" :key="prize.id">
              <div class="record_lains">{{prize.name}}</div>
              <div class="record_laine2s">{{prize.time}}</div>
            </div>
          </div>
        </div>
        <!-- 我的礼券 -->
        <div class="record_cont" v-if="right==0">
          <div class="record_item" v-for="jfq in jfqs" :key="jfq.index">
            <div class="jfq">{{jfq.name}}</div>
            <div class="see" @click="LinkTo('/Voucher')">查看</div>
          </div>
        </div>
      </div>
      <div class="user_foot">
        <div class="user_setBtn" @click="LinkTo('/sign')" v-if="baoming==1">修改个人信息</div>
        <div class="user_setBtn" @click="LinkTo('/sign')" v-else>进入报名</div>
      </div>
      <div class="kong"></div>
    </div>
    <!--提示二 维码弹窗 -->
    <div class="module" v-show="alertImgModule">
      <div class="module3-bgimg">
        <div class="module-close">
          <div class="jl" @click="listcomifessss"></div>
          <img src="http://hfc.suoluomei.com/hpl/Public/Beautiful/close.png" @click="closeModules" alt="">
        </div>
        <div class="Draw">
          <img src="http://sucai.suoluomei.cn/sucai_zs/images/hpl.jpg?x-oss-process=image/quality,Q_70" alt="" class="erweima" v-if="hpl">
          <img src="http://sucai.suoluomei.cn/sucai_zs/images/hpl2.jpg?x-oss-process=image/quality,Q_70" alt="" class="erweima" v-if="hpl2">
          <div class="addes" v-if="hpl3">
            <font>关注公众号并且注册<br>禾粉圈后可领取奖品~</font>
          </div>
        </div>
        <div class="comfire">
          <div class="comfire-btn">
            <button class="hplbtn" v-if="hpl4">
              <a href="http://wxtest.suoluomei.com/hpl/index.php?s=/Weixin/register/index">点击注册禾粉圈</a>
            </button>
            <button class="hplbtn" v-else>
              <a class="btns" @click="listcomife">确定</a>
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="mine-bgimg"> -->
      <!-- <img src="http://h-cdn.zealcdn.cn/20181119115654.png" onclick='return false' alt="">
      <div class="user_box">
        <div class="user_head">
          <img src="http://sucai.suoluomei.cn/sucai_zs/images/tx.png?x-oss-process=image/quality,Q_70" alt="">
        </div>
      </div> -->
       <!-- <div class="tip-box" v-show="!haveVule">
        <mu-carousel hide-controls interval='6000'>
          <mu-carousel-item>
            <div class="tip">
              <div class="tip-num">{{message.id}}号</div>
              <div class="allnum">总排名:<font>{{message.vote_num}}</font></div>
              <div class="monthnum">月排名:<font>{{message.month_num}}</font></div>
              <div class="weeknum">周排名:<font>{{message.week_num}}</font></div>
              <button @click="LinkTo('/signUp')">修改个人信息</button>
            </div>
          </mu-carousel-item>
          <mu-carousel-item>
            <div class="tip">
              <div class="tip-num">{{message.id}}号</div>
              <div class="allnum">总票数:<font>414562</font></div>
              <div class="monthnum">月票数:<font>55433</font></div>
              <div class="weeknum">周票数:<font>314</font></div>
              <button @click="LinkTo('/signUp')">修改个人信息</button>
            </div>
          </mu-carousel-item>
        </mu-carousel>
      </div> -->
      <!-- 报名 -->
      <!-- <div class="tip-box" v-show="haveVule">
        <div class="tip2">
          <button @click="LinkTo('/signUp')">参与报名</button>
        </div>
      </div> -->
    <!-- </div> -->
    <!-- 底部导航 -->
    <bottomBar :toSelected='proValue'></bottomBar>
  <!--   <mu-dialog title="提示" width="360" :open.sync="openSimple">
    {{contant}}
    <mu-button slot="actions" flat color="primary" @click="closeSimpleDialog">关闭</mu-button>
  </mu-dialog> -->

  </div>
</template>
<script>
import bottomBar from "../components/bottomBar.vue";
import hplDialog from "../components/hplDialog.vue";
import http from "../utils/http";
import 'weui';
import weui from 'weui.js';
// {name:'禾葡兰美容仪',time:'2018-09-12 14:15:32'},{name:'禾葡兰面膜',time:'2018-09-12 14:15:32'}
export default {
  name: "mine",
  data() {
    return {
      proValue: "mine",
      haveVule: false,
      message: [],
      messageName: {},
      tipNum: [],
      baoming: 0,
      right: 1,
      prizes: [],
      visible: false,
      contant: '',
      msg: '',
      hpl: true,
      hpl2: true,
      hpl3: true,
      hpl4: true,
      alertImgModule: false,
      jfqs: []
    };
  },
  created() {
    var str = location.href;
    // console.log('urlStr',str)
    // var reg = /sign\/(.*)#/i
    // var res = str.search(reg)
    var start = str.search("sign/");
    var end = str.search("#");
    var start2 = parseInt(start + 5);
    var res = str.substring(start2, end);
    // console.log('res',res)
    var that = this;
    http
      .post("Zmhf/index",{
        key: "be15d4ca913c91494cb4f9cd6ce317c6",
        sign: res,
        type: "SelectMyListData"
      })
      .then(function(response) {
        // console.log("response", response);
        if (response.errcode == 0) {
          that.haveVule = true;
          that.message = response.data;
          that.messageName = response.data.user_data[0];
          that.baoming = response.data.is_sign;
        } else {
        }
      })
      .catch(function(error) {
        // console.log("error", error);
      });

      // 奖券
      http
      .post("Zmhf/index",{
        key: "be15d4ca913c91494cb4f9cd6ce317c6",
        sign: res,
        type: "getUserTicketList"
      })
      .then(function(response) {
        // console.log("response", response);
        if (response.errcode == 0) {
          console.log('奖券',response.data.rows)
          that.jfqs = response.data.rows
        } else {
        }
      })
      .catch(function(error) {
        // console.log("error", error);
      });


      // 奖品列表
      var str = location.href;
    // console.log('urlStr',str)
    // var reg = /sign\/(.*)#/i
    // var res = str.search(reg)
    var start = str.search("sign/");
    var end = str.search("#");
    var start2 = parseInt(start + 5);
    var res = str.substring(start2, end);
    // console.log('res',res)
    http
      .post("Zmhf/index",{
        key: "be15d4ca913c91494cb4f9cd6ce317c6",
        sign: res,
        type: "BeautifulactionDrawPrizeLog"
      })
      .then(function(response) {
        // console.log("response", response);
        if (response.errcode == 0) {
          that.prizes = response.data
          console.log('that.prizes1',that.prizes)
        } else {
        }
      })
      .catch(function(error) {
        // console.log("error", error);
      });
      console.log('that.prizes2',that.prizes)
  },
  methods: {
    handleModalVisible: function () {
      this.visible = !this.visible
    },
    lq: function () {
      if (this.baoming == 0) {
        weui.alert('要参加报名才能查看战绩哟');
        // console.log('this.baoming', this.baoming)
        // // this.$next
        // var _this = this
        // this.$nextTick(function () {
        //   _this.msg = '要参加报名才能查看战绩哟'
        //   _this.visible = true
        // })
        // alert('要参加报名才能查看战绩哟')
        // alert('')
        return;
      }
      this.right = 0
    },
    jp: function () {
      this.right = 1
    },
    zj: function () {
      if (this.baoming == 0) {
        weui.alert('要参加报名才能查看战绩哟');
        // console.log('this.baoming', this.baoming)
        // // this.$next
        // var _this = this
        // this.$nextTick(function () {
        //   _this.msg = '要参加报名才能查看战绩哟'
        //   _this.visible = true
        // })
        // alert('要参加报名才能查看战绩哟')
        // alert('')
        return;
      }
      this.right = 2
    },
    hb: function () {
      if (this.baoming == 0) {
        weui.alert('要参加报名才能查看海报哟');
        // console.log('this.baoming', this.baoming)
        // // this.$next
        // var _this = this
        // this.$nextTick(function () {
        //   _this.msg = '要参加报名才能查看海报哟'
        //   _this.visible = true
        // })
        // alert('要参加报名才能查看海报哟')
        // alert('')
        return;
      }
      this.right = 3
      var str = location.href;
    // console.log('urlStr',str)
    // var reg = /sign\/(.*)#/i
    // var res = str.search(reg)
    var start = str.search("sign/");
    var end = str.search("#");
    var start2 = parseInt(start + 5);
    var res = str.substring(start2, end);
    // console.log('res',res)
    let that = this;
    http
      .post("Zmhf/index",{
        key: "be15d4ca913c91494cb4f9cd6ce317c6",
        sign: res,
        type: "SelectMyListData"
      })
      .then(function(response) {
        // console.log("response", response);
        if (response.errcode == 0) {
          that.$router.push({
          path: "/ticket",
          query: { candidates_id: response.data.id }
        });
        }
      })
      .catch(function(error) {
        // console.log("error", error);
      });
    },
    // 路由跳转
    LinkTo: function(link) {
      // EventBus.$emit('LinkTo', 0)
      this.$router.push({ path: link });
    },
    listcomife: function() {
      this.alertImgModule = false;
    },
    listcomifessss: function() {
      this.alertImgModule = false;
    },
    closeModules: function() {
      this.showModule = false;
      this.alertModule = false;
      this.alertImgModule = false;
      this.getModule = false;
    },
    JumpTo: function(link) {
      // this.showModule = false;
      var str = location.href;
      // console.log('urlStr',str)
      // var reg = /sign\/(.*)#/i
      // var res = str.search(reg)
      var start = str.search("sign/");
      var end = str.search("#");
      var start2 = parseInt(start + 5);
      var res = str.substring(start2, end);
      // console.log('res',res)
      let that = this;
      http
        .post("Zmhf/index", {
          // candidates_id: this.$route.query.candidates_id
          key: "be15d4ca913c91494cb4f9cd6ce317c6",
          sign: res,
          type: "JudgeisRegister"
        })
        .then(function(response) {
          // console.log(response);
          // console.log("response.data.is_register",response.data.is_register);
          // console.log("response.data.is_focus",response.data.is_focus);
          if (response.errcode == 0) {
            if (response.data.is_register == 1 && response.data.is_focus == 0) {
              that.$router.push({ path: link });
              that.alertImgModule = false;
            }
            if (response.data.is_register == 1 && response.data.is_focus == 1) {
              that.alertImgModule = true;
              that.hpl2 = false;
              that.hpl3 = true;
              that.hpl4 = false;
            }
            if (response.data.is_register == 1 && response.data.is_focus == 2) {
              that.alertImgModule = true;
              that.hpl = false;
              that.hpl3 = true;
              that.hpl4 = false;
            }
            if (response.data.is_register == 0 && response.data.is_focus == 0) {
              that.alertImgModule = true;
              that.hpl = false;
              that.hpl2 = false;
              that.hpl3 = true;
              that.hpl4 = true;
            }
            if (response.data.is_register == 0 && response.data.is_focus == 1) {
              that.alertImgModule = true;
              that.hpl = true;
              that.hpl2 = false;
              that.hpl3 = true;
              that.hpl4 = true;
            }
          } else {
            // that.alertImgModule = true;
            // that.hpl2 = false;
            // that.hpl3 = true;
            // that.hpl4 = false;
            weui.alert(response.msg);
          }
        })
      // EventBus.$emit('LinkTo', 0)
    }
  },
  components: { bottomBar, hplDialog }
};
</script>

<style lang="scss" scoped>
.mine {
  display: inline-flex;
  justify-content: center;
  width: 100%;
  height: 100vh;
  .mine-bgimg {
    padding: 0rem 1.7rem 0rem 1.7rem;
    width: 100%;
    height: 100%;
    background-image: url("http://sucai.suoluomei.cn/sucai_zs/images/imgbg.png?x-oss-process=image/quality,Q_70");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    .addr {
      float: right;
      width: 5rem;
      height: 1.5rem;
      margin-top: 2rem;
      margin-right: -1.7rem;
      background-image: url('http://sucai.suoluomei.cn/sucai_zs/images/addAddr.png?x-oss-process=image/quality,Q_70');
      background-size: 81px 23px;
      background-repeat: no-repeat;
    }
    .user_head {
      width: 8.49rem;
      height: 8.49rem;
      margin: 0 auto;
      border-radius: 50%;
      padding: 0.437rem;
      border: 0.11rem solid #fff;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        overflow: hidden;
        object-fit: cover;
      }
    }
    .user_info {
      color: #000;
      font-size: 1rem;
      margin-top: 0.79rem;
      display: flex;
      justify-content: space-around;
    }
    .user_record {
      margin-top: 1rem;
      padding: 0.79rem 0.99rem;
      box-sizing: border-box;
      // background-color: #fce6eb;
      background-color: rgba(252, 230, 235, 0.7);
      border-radius: 15px;
    }
    .title{
      display: flex;
      justify-content: space-around;
      .record_title {
        letter-spacing: 0.25rem;
        display: inline-block;
        position: relative;
        margin: 0.588rem auto;
        text-align: center;
        color: #000;
        padding-bottom: 0.2rem;
        font-size: 0.6rem;
        border-bottom: 0.03rem solid #000;
      }
      .redfont{
        color: red;
        border-bottom: 0.03rem solid red;
      }
    }
    // .record_title::after {
    //   position: absolute;
    //   width: 120%;
    //   left: -10%;
    //   right: 0;
    //   bottom: 0;
    //   display: block;
    //   content: "";
    // }
    // .record_title::before {
    //   position: absolute;
    //   width: 80%;
    //   left: 0;
    //   right: 0;
    //   bottom: -0.3rem;
    //   display: block;
    //   border: 0.01rem solid #000;
    //   content: " ";
    //   margin: 0 auto;
    // }
    .record_cont {
      display: flex;
      flex-direction: column;
    }
    .record_item {
      margin: 0.284rem 0;
      padding: 0.56rem 0;
      border-radius: 0.284rem;
      display: flex;
      justify-content: space-around;
      align-items: center;
      background-color: #fff;
      .jfq{
        padding-left: 1rem;
        width: 80%;
        text-align: left;
      }
      .see{
        width: 20%;
        color: #ff0837;
      }
      .record_lain {
        width: 33.33%;
        font-size: 1.02rem;
        color: #ff0837;
      }
      .record_lains {
        width: 33.33%;
        font-size: 1rem;
        color: #777;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .record_laines{
        width: 33.33%;
        font-size: 1.02rem;
        color: #000;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .record_laine2s{
        padding-left: 2rem;
        width: 66.66%;
        text-align: left;
        font-size: 0.8rem;
        color: #000;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
    .prize-item{
      width: 100%;
      height: 9.8rem;
      overflow: scroll;
    }
    .record_chitem {
      background-color: #fbeff1;
    }
    .record_icon {
      width: 1.44rem;
      height: 1.38rem;
    }
    .user_setBtn {
      margin: 1rem auto;
      border-radius: 10px;
      text-align: center;
      color: #fff;
      width: 11.92rem;
      height: 4rem;
      line-height: 2.5rem;
      font-size: 1.2rem;
      padding: 0.55rem 0;
      background-image: url("http://sucai.suoluomei.cn/sucai_zs/images/btn.png?x-oss-process=image/quality,Q_70");
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
    }
    .kong{
      width: 100%;
      height: 3.4rem;
    }
    // display: inline-flex;
    // justify-content: center;
    // position: relative;
    // width: 100%;
    // height: 100%;
    // padding: 2.27rem 1.7rem 0 1.7rem;
    // padding-bottom: 4rem;
    // img {
    //   width: 100%;
    //   height: 100%;
    //   vertical-align: bottom;
    //   // padding-bottom: 4rem;
    //   &:nth-of-type(1) {
    //     position: absolute;
    //     left: 0;
    //     top: 0;
    //   }
    // }
    .tip-box {
      position: absolute;
      bottom: 7rem;
      width: 22rem;
      height: 18rem;
      .mu-carousel {
        height: 21.5rem;
      }
      .tip {
        width: 22rem;
        height: 20rem;
        background-image: url("http://hfc.suoluomei.com/hpl/Public/Beautiful/tip.png");
        background-position: center;
        background-size: 18rem;
        background-repeat: no-repeat;
        .tip-num {
          position: absolute;
          width: 4rem;
          top: 3.5rem;
          right: 3.3rem;
          color: #fff;
          font-size: 1rem;
          transform: rotate(22deg);
          -ms-transform: rotate(22deg); /* IE 9 */
          -moz-transform: rotate(22deg); /* Firefox */
          -webkit-transform: rotate(22deg); /* Safari and Chrome */
          -o-transform: rotate(22deg); /* Opera */
        }
        .allnum {
          position: absolute;
          top: 8rem;
          left: 7.5rem;
          width: 100%;
          color: #333;
          text-align: left;
          font {
            padding-left: 1rem;
            font-size: 1.5rem;
            color: #fe7878;
          }
        }
        .monthnum {
          position: absolute;
          top: 10rem;
          left: 7.5rem;
          width: 100%;
          color: #333;
          text-align: left;
          font {
            padding-left: 1rem;
            font-size: 1.5rem;
            color: #fe7878;
          }
        }
        .weeknum {
          position: absolute;
          top: 12rem;
          left: 7.5rem;
          width: 100%;
          color: #333;
          text-align: left;
          font {
            padding-left: 1rem;
            font-size: 1.5rem;
            color: #fe7878;
          }
        }
        button {
          position: absolute;
          top: 15rem;
          left: 7.5rem;
          width: 7rem;
          height: 2rem;
          line-height: 2rem;
          text-align: center;
          color: #fff;
          background-color: #f7c2eb;
          border: 0;
          border-radius: 0.5rem;
        }
      }
      .tip2 {
        width: 22rem;
        height: 20rem;
        background-image: url("http://hfc.suoluomei.com/hpl/Public/Beautiful/tip.png");
        background-position: center;
        background-size: 18rem;
        background-repeat: no-repeat;
        button {
          position: absolute;
          top: 10rem;
          left: 7.5rem;
          width: 7rem;
          height: 3rem;
          line-height: 2rem;
          text-align: center;
          color: #fff;
          background-color: #f7c2eb;
          border: 0;
          border-radius: 0.5rem;
        }
      }
    }
  }
  .user_box {
    margin-top: 1rem; 
  }
}
.module {
  display: inline-flex;
  align-items: center;
  justify-content: space-around;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 3000;
  .module-bgimg {
    width: 100%;
    height: 25rem;
    background-image: url("http://sucai.suoluomei.cn/sucai_zs/images/tacket-img.png?x-oss-process=image/quality,Q_70");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    .module-close {
      margin-top: 5rem;
      padding-right: 5rem;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      .jl {
        font-size: 0.9rem;
        color: #fff;
        padding-left: 3.5rem;
      }
      img {
        width: 1.2rem;
      }
    }
    .Draw {
      padding-right: 1rem;
      position: relative;
      display: inline-flex;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
      .stop {
        transition: all 3s;
        transform: rotate;
      }
      // 积分
      .run0 {
        transform: rotate(4710deg);
        transition: all 5s;
      }
      //谢谢惠顾
      // .run2 {
      //   transform: rotate(4730deg); //4730
      //   transition: all 5s;
      // }
      //面膜
      .run2 {
        transform: rotate(4750deg);
        transition: all 5s;
      }
      //冻干粉
      .4 {
        transform: rotate(4800deg);
        transition: all 5s;
      }
      //养眼杯
      .run4 {
        transform: rotate(4850deg);
        transition: all 5s;
      }
      //围巾
      .run5 {
        transform: rotate(4885deg);
        transition: all 5s;
      }
      //果冻包
      .run6 {
        transform: rotate(4930deg);
        transition: all 5s;
      }
      //洁面仪
      .run7 {
        transform: rotate(4975deg);
        transition: all 5s;
      }
      //保温杯
      .run8 {
        transform: rotate(5020deg);
        transition: all 5s;
      }
      .tip-banner {
        width: 100%;
        overflow: hidden;
        ul {
          width: 100%;
          height: 10rem;
          margin: 0;
          padding: 0;
          li {
            list-style: none;
          }
        }
        .tip-font {
          position: absolute;
          top: 7rem;
          width: 100%;
          font-size: 1rem;
          color: #333;
        }
        .tip-font-get {
          position: absolute;
          top: 10rem;
          width: 100%;
          font-size: 1rem;
          color: #777;
          font {
            display: block;
            width: 15rem;
            color: #333;
            font-weight: 600;
            font-size: 1rem;
          }
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
      .tip-text {
        width: 100%;
        font-size: 1rem;
        color: #555;
        font {
          font-size: 1.2rem;
          color: #ff4e4e;
        }
      }
      .go {
        position: absolute;
        top: 4.8rem;
        left: 9.8rem;
        width: 2.8rem;
        height: 4.1rem;
      }
      .prize {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        img {
          position: absolute;
          top: 6rem;
          right: 3.5rem;
          width: 3rem;
          height: 3rem;
        }
      }
      img {
        margin: 1rem 0;
        width: 13rem;
        height: 13rem;
      }
      h2 {
        padding: 2rem 0;
      }
      .add {
        width: 100%;
        font {
          display: block;
          color: #555;
          font-size: 1rem;
        }
      }
      .change {
        padding-bottom: 4rem;
        width: 100%;
        color: #000;
        font {
          color: #ff4e4e;
          font-size: 2rem;
        }
      }
    }
    .comfire {
      margin-top: 1rem;
      margin-left: -1rem;
      display: inline-flex;
      justify-content: center;
      width: 100%;
      .comfire-btn {
        width: 6.5rem;
        height: 2.2rem;
        line-height: 2rem;
        border-radius: 0.5rem;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        button {
          width: 100%;
          height: 100%;
          border: 0.2rem solid #ffbe04;
          border-radius: 0.5rem;
          outline: none;
          background-color: #ffdb76;
        }
      }
    }
  }
  .module2-bgimg {
    width: 100%;
    height: 25rem;
    background-image: url("http://sucai.suoluomei.cn/sucai_zs/images/tacket2-img.png?x-oss-process=image/quality,Q_70");
    background-repeat: no-repeat;
    background-size: 18rem;
    background-position: center;
    .module-close {
      margin-top: 2rem;
      padding-right: 4rem;
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      width: 100%;
      img {
        width: 1.2rem;
      }
    }
    .Draw {
      position: relative;
      display: inline-flex;
      flex-wrap: wrap;
      justify-content: center;
      h2 {
        color: #fff;
      }
      width: 100%;
      .tip-banner {
        width: 100%;
        overflow: hidden;
        ul {
          width: 100%;
          margin: 0;
          max-height: 10rem;
          overflow: scroll;
          padding: 0;
          li {
            padding-left: 5rem;
            text-align: left;
            list-style: none;
            color: #fff;
          }
        }
        .tip-font-get {
          display: inline-flex;
          justify-content: center;
          position: absolute;
          top: 11rem;
          width: 100%;
          font-size: 0.9rem;
          color: #fff;
          font {
            display: block;
            width: 15rem;
            color: #fff;
            font-weight: 600;
            font-size: 1rem;
          }
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
      .tip-text {
        width: 100%;
        font-size: 1rem;
        color: #555;
        font {
          font-size: 1.2rem;
          color: #ff4e4e;
        }
      }
      img {
        margin: 1rem 0;
        width: 12rem;
        height: 12rem;
      }
      h2 {
        padding: 2rem 0;
      }
      .add {
        width: 100%;
        font {
          display: block;
          color: #555;
          font-size: 1rem;
        }
      }
    }
    .comfire {
      margin-top: 3rem;
      display: inline-flex;
      justify-content: center;
      width: 100%;
      .comfire-btn {
        width: 6.5rem;
        height: 2.2rem;
        line-height: 2rem;
        border-radius: 0.5rem;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        button {
          width: 100%;
          height: 100%;
          border: 0.2rem solid #ffbe04;
          border-radius: 0.5rem;
          outline: none;
          background-color: #ffdb76;
        }
      }
    }
  }
  .module3-bgimg {
    width: 100%;
    height: 25rem;
    background-image: url("http://sucai.suoluomei.cn/sucai_zs/images/tacket2-img.png?x-oss-process=image/quality,Q_70");
    background-repeat: no-repeat;
    background-size: 18rem;
    background-position: center;
    .module-close {
      margin-top: 2rem;
      padding-right: 4rem;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      .jl {
        font-size: 0.9rem;
        color: #fff;
        padding-left: 3.5rem;
      }
      img {
        width: 1.2rem;
      }
    }
    .module-close2 {
      margin-top: 2rem;
      padding-right: 4rem;
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      width: 100%;
      .jl {
        font-size: 0.9rem;
        color: #fff;
        padding-left: 3.5rem;
      }
      img {
        width: 1.2rem;
      }
    }
    .Draw {
      position: relative;
      display: inline-flex;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
      .erweima {
        width: 7rem;
        margin: 1rem 0.5rem;
        height: 7rem;
      }
      .tip-banner {
        width: 100%;
        overflow: hidden;
        ul {
          width: 100%;
          height: 10rem;
          margin: 0;
          padding: 0;
          li {
            list-style: none;
          }
        }
        .tip-font-get {
          position: absolute;
          top: 11rem;
          width: 100%;
          font-size: 0.9rem;
          color: #fff;
          font {
            color: #fff;
            font-weight: 600;
            font-size: 1.1rem;
          }
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
      .tip-text {
        width: 100%;
        font-size: 1rem;
        color: #555;
        font {
          font-size: 1.2rem;
          color: #ff4e4e;
        }
      }
      img {
        margin: 1rem 0;
        width: 15rem;
        height: 9rem;
      }
      h2 {
        padding: 2rem 0;
      }
      .add {
        display: inline-flex;
        justify-content: center;
        width: 100%;
        font {
          display: block;
          width: 15rem;
          color: #fff;
          font-size: 0.9rem;
        }
      }
      .addes {
        display: inline-flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        font {
          display: block;
          width: 100%;
          color: #fff;
          font-size: 0.9rem;
        }
      }
    }
    .comfire {
      margin-top: 2rem;
      display: inline-flex;
      justify-content: center;
      width: 100%;
      .comfire-btn {
        width: 8rem;
        height: 2.2rem;
        line-height: 2rem;
        border-radius: 0.5rem;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        button {
          width: 100%;
          height: 100%;
          border: 0.2rem solid #ffbe04;
          border-radius: 0.5rem;
          outline: none;
          background-color: #ffdb76;
          a {
            color: #ff0837;
          }
        }
      }
    }
  }
}
</style>
